<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>day08_demo01</title>

<style>
	div{
		border:1px solid red;
		width:218px;
		height:218px;
		margin:30px auto;
	}
	.hide{
		display:none;
		
	}
	.show{
		display:inline-block;
	}
	

</style>
<script>
	var id;
	var n=0;
	window.onload=function(){
		start();
		
	}
	function stop(){
		clearInterval(id);		
	}
	function start(){
		id=setInterval(function(){
			n++;
			//获取所有图片
			var imgs=document.getElementsByTagName("img");
			//将他们都隐藏
			for(var i=0;i<imgs.length;i++){
				imgs[i].className="hide";
				
			}
			//将写一个图片显示
			var next=n%imgs.length;
			imgs[next].className="show";
			
		},1000);
	}
	

</script>

</head>
<body>
	<!-- 
		hover是伪类选择器;
		onmouseover:鼠标悬停事件;
		onmouseout:鼠标离开事件 -->

	<div onmouseover="stop();" onmouseout="start();">
		<img src="../images/01.jpg"/>
		<img src="../images/02.jpg" class="hide"/>
		<img src="../images/03.jpg" class="hide"/>
		<img src="../images/04.jpg" class="hide"/>
		<img src="../images/05.jpg" class="hide"/>
		<img src="../images/06.jpg" class="hide"/>
	
	
	
	</div>
	

</body>
</html>